<template>
  <page-header-wrapper>
    <a-row :gutter="24">
      <a-col :lg="6" :sm="12" :xs="24">
        <a-card title="访问人数" :bordered="false">
          <a-tabs slot="extra" size="small" v-model="visit_key" :tabBarGutter="0">
            <a-tab-pane :key="0" tab="昨日"> </a-tab-pane>
            <a-tab-pane :key="1" tab="上周"> </a-tab-pane>
            <a-tab-pane :key="2" tab="上月"> </a-tab-pane>
          </a-tabs>
          <div v-if="visit[visit_key]" style="text-align: center; font-size: 30px; font-weight: bold">
            {{ visit[visit_key].amount }}
          </div>
          <p v-if="visit[visit_key]" style="text-align: center">
            <trend :flag="visit[visit_key].status == 1 ? 'up' : 'down'" :reverseColor="true" style="margin-right: 16px">
              <span :style="visit[visit_key].status == 1 ? 'color: green' : 'color: red'">
                {{ visit[visit_key].percent }}%
              </span>
            </trend>
          </p>
        </a-card>
      </a-col>
      <a-col :lg="6" :sm="12" :xs="24">
        <a-card title="新增访问人数" :bordered="false">
          <a-tabs slot="extra" size="small" v-model="new_visit_key" :tabBarGutter="0">
            <a-tab-pane :key="0" tab="昨日"> </a-tab-pane>
            <a-tab-pane :key="1" tab="上周"> </a-tab-pane>
            <a-tab-pane :key="2" tab="上月"> </a-tab-pane>
          </a-tabs>
          <div v-if="new_visit[new_visit_key]" style="text-align: center; font-size: 30px; font-weight: bold">
            {{ new_visit[new_visit_key].amount }}
          </div>
          <p v-if="new_visit[new_visit_key]" style="text-align: center">
            <trend
              :flag="new_visit[new_visit_key].status == 1 ? 'up' : 'down'"
              :reverseColor="true"
              style="margin-right: 16px"
            >
              <span :style="new_visit[new_visit_key].status == 1 ? 'color: green' : 'color: red'">
                {{ new_visit[new_visit_key].percent }}%
              </span>
            </trend>
          </p>
        </a-card>
      </a-col>
      <a-col :lg="6" :sm="12" :xs="24">
        <a-card title="分享数据" :bordered="false">
          <a-tabs slot="extra" size="small" v-model="share_key" :tabBarGutter="0">
            <a-tab-pane :key="0" tab="昨日次数"> </a-tab-pane>
            <a-tab-pane :key="1" tab="昨日人数"> </a-tab-pane>
          </a-tabs>
          <div v-if="share[share_key]" style="text-align: center; font-size: 30px; font-weight: bold">
            {{ share[share_key].amount }}
          </div>
          <p v-if="share[share_key]" style="text-align: center">
            <trend :flag="share[share_key].status == 1 ? 'up' : 'down'" :reverseColor="true" style="margin-right: 16px">
              <span :style="share[share_key].status == 1 ? 'color: green' : 'color: red'">
                {{ share[share_key].percent }}%
              </span>
            </trend>
          </p>
        </a-card>
      </a-col>
      <a-col :lg="6" :sm="12" :xs="24">
        <a-card title="商品浏览量" :bordered="false">
          <a-tabs slot="extra" size="small" v-model="browse_key" :tabBarGutter="0">
            <a-tab-pane :key="0" tab="昨日次数"> </a-tab-pane>
            <a-tab-pane :key="1" tab="昨日人数"> </a-tab-pane>
          </a-tabs>
          <div v-if="browse[browse_key]" style="text-align: center; font-size: 30px; font-weight: bold">
            {{ browse[browse_key].amount }}
          </div>
          <p v-if="browse[browse_key]" style="text-align: center">
            <trend
              :flag="browse[browse_key].status == 1 ? 'up' : 'down'"
              :reverseColor="true"
              style="margin-right: 16px"
            >
              <span :style="browse[browse_key].status == 1 ? 'color: green' : 'color: red'">
                {{ browse[browse_key].percent }}%
              </span>
            </trend>
          </p>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="24" style="margin-top: 24px">
      <a-col :lg="12" :sm="12" :xs="24">
        <a-card title="近七日访问趋势" :bordered="false">
          <v-chart :forceFit="true" :height="height" :padding="[30, 10, 40, 30]" :data="visitPerson" :scale="visitSale">
            <v-tooltip :htmlContent="htmlContent" />
            <v-axis />
            <v-legend
              position="top"
              :offsetY="5"
              :itemFormatter="
                (val) => {
                  return '访客数'
                }
              "
            />
            <v-line position="date*temperature" color="city" />
            <v-point position="date*temperature" color="city" shape="circle" />
          </v-chart>
        </a-card>
      </a-col>
      <a-col :lg="12" :sm="12" :xs="24">
        <a-card title="近七日留存趋势" :bordered="false">
          <v-chart
            :forceFit="true"
            :height="height"
            :padding="[30, 10, 40, 30]"
            :data="keep_trend_data"
            :scale="visitSale"
          >
            <v-tooltip :htmlContent="htmlContent" />
            <v-axis />
            <v-legend
              position="top"
              :offsetY="5"
              :itemFormatter="
                (val) => {
                  return val == 'one' ? '一日后' : '三日后'
                }
              "
            />
            <v-line position="date*temperature" color="city" />
            <v-point position="date*temperature" color="city" shape="circle" />
          </v-chart>
        </a-card>
      </a-col>
    </a-row>
    <a-row style="padding-top: 24px">
      <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card
          class="antd-pro-pages-dashboard-analysis-salesCard"
          :loading="loading"
          :bordered="false"
          title="销售额类别占比"
          :style="{ height: '100%' }"
        >
          <div slot="extra" style="height: inherit">
            <!-- style="bottom: 12px;display: inline-block;" -->
            <span class="dashboard-analysis-iconGroup">
              <a-dropdown :trigger="['click']" placement="bottomLeft">
                <a-icon type="ellipsis" class="ant-dropdown-link" />

                <a-radio-group defaultValue="a" size="small" slot="overlay">
                  <a-radio-button value="a" @click="UserTypeChange('active')">活跃用户</a-radio-button>
                  <a-radio-button value="b" @click="UserTypeChange('add')">新增用户</a-radio-button>
                </a-radio-group>
              </a-dropdown>
            </span>
            <div class="analysis-salesTypeRadio">
              <a-radio-group defaultValue="a">
                <a-radio-button value="a" @click="UserDataTypeChange(1)">今日</a-radio-button>
                <a-radio-button value="b" @click="UserDataTypeChange(2)">最近七天</a-radio-button>
                <a-radio-button value="c" @click="UserDataTypeChange(3)">最近三十天</a-radio-button>
              </a-radio-group>
            </div>
          </div>
          <a-row>
            <a-col :lg="6" :md="24">
              <!-- style="width: calc(100% - 240px);" -->
              <div>
                <v-chart :forceFit="true" :height="400" :data="userColumnarData">
                  <v-coord type="rect" direction="LB" />
                  <v-tooltip :htmlContent="htmlContent" />
                  <v-axis dataKey="name" :label="{ offset: 12 }" />
                  <v-bar position="name*value" :label="labelInterval" />
                </v-chart>
              </div>
            </a-col>
            <a-col :lg="10" :md="24">
              <!-- style="width: calc(100% - 240px);" -->
              <div>
                <v-chart :force-fit="true" :height="405" :data="userPieData" :scale="pieScale">
                  <v-tooltip :showTitle="false" dataKey="city*percent" />
                  <v-axis />
                  <!-- position="right" :offsetX="-140" -->
                  <v-legend dataKey="city" />
                  <v-pie position="percent" color="city" :label="province_label_config" :vStyle="pieStyle" />
                  <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
                </v-chart>
              </div>
            </a-col>
            <a-col :lg="8" :md="24">
              <!-- style="width: calc(100% - 240px);" -->
              <div>
                <v-chart :force-fit="true" :height="405" :data="userSexData" :scale="pieScale">
                  <v-tooltip :showTitle="false" dataKey="sex*percent" />
                  <v-axis />
                  <!-- position="right" :offsetX="-140" -->
                  <v-legend dataKey="sex" />
                  <v-pie position="percent" color="sex" :vStyle="pieStyle" :label="sex_label_config" />
                  <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
                </v-chart>
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </page-header-wrapper>
</template>

<script>
import { STable, ChartCard, Trend, MiniArea, MiniProgress, MiniBar } from '@/components'
import { collect } from '@/api/statistic/data'
function getDay(day) {
  var today = new Date()
  var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
  today.setTime(targetday_milliseconds) //注意，这行是关键代码
  var tYear = today.getFullYear()
  var tMonth = today.getMonth()
  var tDate = today.getDate()
  tMonth = doHandleMonth(tMonth + 1)
  tDate = doHandleMonth(tDate)
  return tYear + '' + tMonth + '' + tDate
}

function doHandleMonth(month) {
  var m = month
  if (month.toString().length == 1) {
    m = '0' + month
  }
  return m
}
const DataSet = require('@antv/data-set')
const columns = [
  {
    title: '日期',
    dataIndex: 'date',
  },
  {
    title: '优惠券名称',
    dataIndex: 'name',
  },
  {
    title: '发放数量',
    dataIndex: 'all_num',
  },
  {
    title: '已使用数量',
    dataIndex: 'use_num',
  },
  {
    title: '未使用数量',
    dataIndex: 'unuse_num',
  },
  {
    title: '已失效数量',
    dataIndex: 'end_num',
  },
]
const pieScale = [
  {
    dataKey: 'percent',
    min: 0,
    formatter: '.0%',
  },
]

export default {
  name: 'CollectData',
  components: {
    STable,
    ChartCard,
    Trend,
    MiniArea,
    MiniProgress,
    MiniBar,
  },
  data() {
    return {
      // 折线图测试
      height: 300,
      pieScale,
      pieStyle: {
        stroke: '#666666',
        lineWidth: 1,
      },

      htmlContent: (title, items) => {
        var html = '<div class="g2-tooltip">'
        var titleDom = '<div class="g2-tooltip-title" style="margin-bottom: 4px;">' + title + '</div>'
        var listDom = '<ul class="g2-tooltip-list">'
        for (var i = 0; i < items.length; i++) {
          var item = items[i]
          var itemDom =
            '<li data-index={index}>' +
            '<span style="background-color:' +
            item.color +
            ';width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>' +
            item.point._origin.alias[i] +
            '<span class="g2-tooltip-value">' +
            item.value +
            '</span>' +
            '</li>'
          listDom += itemDom
        }
        listDom += '</ul>'
        return html + titleDom + listDom + '</div>'
      },
      // 折线图测试
      // 七日访问趋势
      visitSale: [
        {
          dataKey: 'date',
          alias: '时间',
          min: 0,
        },
      ],
      visitPerson: [{ alias: ['访客数'], city: 'visit', date: '00000000', temperature: 2 }],
      // 七日留存趋势
      keep_trend_data: [{ alias: ['一日后', '三日后'], city: 'three', date: '00000000', temperature: 0 }],
      // 用户画像
      userColumnarData: [{ alias: ['用户数'], id: 1, name: '河南省', value: 0 }],
      userPieData: [],
      userSexData: [],
      user_data_type: 1,
      user_type: 'active',
      user_data: {},
      sex_label_config: [
        'percent',
        {
          formatter: (val, item) => {
            return item.point.sex + ': ' + item.point.value + '(' + val + ')'
          },
        },
      ],
      province_label_config: [
        'percent',
        {
          offset: 10,
          formatter: (val, item) => {
            return item.point.city + ': ' + item.point.value + '(' + val + ')'
          },
        },
      ],
      labelInterval: [
        'value',
        {
          textStyle: {
            fill: '#8d8d8d',
          },
          offset: 10,
          formatter: function formatter(text) {
            return text
          },
        },
      ],

      loading: false,
      visit_key: 0,
      share_key: 0,
      new_visit_key: 0,
      browse_key: 0,
      visit: [],
      share: [],
      new_visit: [],
      browse: [],
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 5,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 16,
        },
      },
      all: {},
      now: {
        order_num: 0,
        goods_num: 0,
        user_num: 0,
        pay_price: 0,
      },
      // 表头
      columns,
      modalLoading: false,
      // 查询条件参数
      queryParam: {
        datetime: [],
        type: 'coupon',
        platform: '-1',
      },
    }
  },
  filters: {},
  created() {
    this.mockData()
    this.loadData()
  },
  methods: {
    initData() {
      // 日访问人数
      this.visit = []
      if (this.all.dailyretaininfo.visit_uv.length > 0) {
        this.visit.push({
          amount: this.all.dailyretaininfo.visit_uv[0].value,
          percent:
            parseInt(
              (Math.abs(this.all.dailyretaininfo.visit_uv[0].value - this.all.lastdailyretaininfo.visit_uv[0].value) /
                this.all.lastdailyretaininfo.visit_uv[0].value) *
                100
            ) || 0,
          status:
            this.all.dailyretaininfo.visit_uv[0].value / this.all.lastdailyretaininfo.visit_uv[0].value >= 1 ? 1 : 2,
        })
      }
      // 周访问人数
      if (this.all.weeklyvisittrend.list.length > 0) {
        this.visit.push({
          amount: this.all.weeklyvisittrend.list[0].visit_uv,
          percent:
            parseInt(
              (Math.abs(this.all.weeklyvisittrend.list[0].visit_uv - this.all.lastweeklyvisittrend.list[0].visit_uv) /
                this.all.lastweeklyvisittrend.list[0].visit_uv) *
                100
            ) || 0,
          status:
            this.all.weeklyvisittrend.list[0].visit_uv / this.all.lastweeklyvisittrend.list[0].visit_uv >= 1 ? 1 : 2,
        })
      }
      // 月访问人数
      if (this.all.monthlyvisittrend.list.length > 0) {
        this.visit.push({
          amount: this.all.monthlyvisittrend.list[0].visit_uv,
          percent:
            parseInt(
              (Math.abs(this.all.monthlyvisittrend.list[0].visit_uv - this.all.lastmonthlyvisittrend.list[0].visit_uv) /
                this.all.lastmonthlyvisittrend.list[0].visit_uv) *
                100
            ) || 0,
          status:
            this.all.monthlyvisittrend.list[0].visit_uv / this.all.lastmonthlyvisittrend.list[0].visit_uv >= 1 ? 1 : 2,
        })
      }
      // 日新增访问人数
      this.new_visit = []
      this.new_visit.push({
        amount: this.all.dailyretaininfo.visit_uv_new[0].value,
        percent:
          parseInt(
            (Math.abs(
              this.all.dailyretaininfo.visit_uv_new[0].value - this.all.lastdailyretaininfo.visit_uv_new[0].value
            ) /
              this.all.lastdailyretaininfo.visit_uv_new[0].value) *
              100
          ) || 0,
        status:
          this.all.dailyretaininfo.visit_uv_new[0].value / this.all.lastdailyretaininfo.visit_uv_new[0].value >= 1
            ? 1
            : 2,
      })
      // 周新增访问人数
      this.new_visit.push({
        amount: this.all.weeklyvisittrend.list[0].visit_uv_new,
        percent:
          parseInt(
            (Math.abs(
              this.all.weeklyvisittrend.list[0].visit_uv_new - this.all.lastweeklyvisittrend.list[0].visit_uv_new
            ) /
              this.all.lastweeklyvisittrend.list[0].visit_uv_new) *
              100
          ) || 0,
        status:
          this.all.weeklyvisittrend.list[0].visit_uv_new / this.all.lastweeklyvisittrend.list[0].visit_uv_new >= 1
            ? 1
            : 2,
      })
      // 月新增访问人数
      this.new_visit.push({
        amount: this.all.monthlyvisittrend.list[0].visit_uv_new,
        percent:
          parseInt(
            (Math.abs(
              this.all.monthlyvisittrend.list[0].visit_uv_new - this.all.lastmonthlyvisittrend.list[0].visit_uv_new
            ) /
              this.all.lastmonthlyvisittrend.list[0].visit_uv_new) *
              100
          ) || 0,
        status:
          this.all.monthlyvisittrend.list[0].visit_uv_new / this.all.lastmonthlyvisittrend.list[0].visit_uv_new >= 1
            ? 1
            : 2,
      })
      // 分享数据次数
      this.share = []
      this.share.push({
        amount: this.all.dailysummarytrend.list[0].share_pv,
        percent:
          parseInt(
            (Math.abs(this.all.dailysummarytrend.list[0].share_pv - this.all.lastsummarytrend.list[0].share_pv) /
              this.all.lastsummarytrend.list[0].share_pv) *
              100
          ) || 0,
        status: this.all.dailysummarytrend.list[0].share_pv / this.all.lastsummarytrend.list[0].share_pv >= 1 ? 1 : 2,
      })
      // 分享数据人数
      this.share.push({
        amount: this.all.dailysummarytrend.list[0].share_uv,
        percent:
          parseInt(
            (Math.abs(this.all.dailysummarytrend.list[0].share_uv - this.all.lastsummarytrend.list[0].share_uv) /
              this.all.lastsummarytrend.list[0].share_uv) *
              100
          ) || 0,
        status: this.all.dailysummarytrend.list[0].share_uv / this.all.lastsummarytrend.list[0].share_uv >= 1 ? 1 : 2,
      })
      // 商品浏览次数
      this.browse = []
      this.browse.push({
        amount: this.all.dailysummarytrend.list[0].share_pv,
        percent:
          parseInt(
            (Math.abs(this.all.dailysummarytrend.list[0].share_pv - this.all.lastsummarytrend.list[0].share_pv) /
              this.all.lastsummarytrend.list[0].share_pv) *
              100
          ) || 0,
        status: this.all.dailysummarytrend.list[0].share_pv / this.all.lastsummarytrend.list[0].share_pv >= 1 ? 1 : 2,
      })
      // 商品浏览人数
      this.browse.push({
        amount: this.all.dailysummarytrend.list[0].share_uv,
        percent:
          parseInt(
            (Math.abs(this.all.dailysummarytrend.list[0].share_uv - this.all.lastsummarytrend.list[0].share_uv) /
              this.all.lastsummarytrend.list[0].share_uv) *
              100
          ) || 0,
        status: this.all.dailysummarytrend.list[0].share_uv / this.all.lastsummarytrend.list[0].share_uv >= 1 ? 1 : 2,
      })
      this.sevenDayVisitTrend()
      this.initUserData()
    },
    UserDataTypeChange(type) {
      this.user_data_type = type
      this.initUserData()
    },
    UserTypeChange(type) {
      this.user_type = type
      this.initUserData()
    },
    initUserData() {
      if (this.user_type === 'active') {
        if (this.user_data_type === 1) {
          this.user_data = this.all.userportraitone.visit_uv
        } else if (this.user_data_type === 2) {
          this.user_data = this.all.userportraitseven.visit_uv
        } else if (this.user_data_type === 3) {
          this.user_data = this.all.userportraitthirty.visit_uv
        }
      } else if (this.user_type === 'add') {
        if (this.user_data_type === 1) {
          this.user_data = this.all.userportraitone.visit_uv_new
        } else if (this.user_data_type === 2) {
          this.user_data = this.all.userportraitseven.visit_uv_new
        } else if (this.user_data_type === 3) {
          this.user_data = this.all.userportraitthirty.visit_uv_new
        }
      }
      this.setUserData()
    },
    setUserData() {
      var ColumnarData = this.user_data.province
      ColumnarData.sort(function (a, b) {
        return b.value - a.value
      })
      this.userColumnarData = []
      for (var i = 0; i < 10; i++) {
        if(ColumnarData[i]){
        this.userColumnarData.unshift(ColumnarData[i])
        }
      }
      this.userColumnarData.map((val) => {
        val.alias = ['用户数']
        return val
      })
      const dv = new DataSet.View().source(this.userColumnarData)
      dv.transform({
        type: 'sort',
        callback(a, b) {
          return a.population - b.population > 0
        },
      })
      this.userColumnarData = dv.rows
      // 饼状图
      var temp = []
      var otherProvince = []
      ColumnarData.forEach(function (e) {
        temp.push(e.value)
      })
      var num = 0
      for (i = 3; i < temp.length - 1; i++) {
        num += temp[i]
      }
      var other = [{ name: '其他', value: num }]
      other.unshift(ColumnarData[0], ColumnarData[1], ColumnarData[2])
      other.forEach(function (e) {
        otherProvince.push({
          city: e.name,
          value: e.value,
        })
      })
      var dv1 = new DataSet.View().source(otherProvince)
      dv1.transform({
        type: 'percent',
        field: 'value',
        dimension: 'city',
        as: 'percent',
      })
      this.userPieData = dv1.rows
      // 性别
      var userSex = this.user_data.genders
      userSex.push(userSex[0])
      userSex.shift()
      var sexName = []
      userSex.forEach(function (e) {
        sexName.push({
          sex: e.name,
          value: e.value,
        })
      })
      var dv2 = new DataSet.View().source(sexName)
      dv2.transform({
        type: 'percent',
        field: 'value',
        dimension: 'sex',
        as: 'percent',
      })
      this.userSexData = dv2.rows
    },
    // 留存趋势
    sevenDayKeepTrend() {
      var retainList = this.all.lastdailyretaininfo.visit_uv
      var retainData = [
        this.all.seventhretaininfo.visit_uv,
        this.all.sixthretaininfo.visit_uv,
        this.all.fifthretaininfo.visit_uv,
        this.all.fourthretaininfo.visit_uv,
        this.all.thirdretaininfo.visit_uv,
      ]
      retainData.push(retainList)
      var keepData = []
      for (var i in retainData) {
        keepData.push({
          date: this.visitPerson[i].date,
          alias: ['一日后', '三日后'],
          one: retainData[i][1] ? retainData[i][1].value : 0,
          three: retainData[i][3] ? retainData[i][3].value : 0,
        })
      }
      keepData.push({
        date: this.visitPerson[6].date,
        alias: ['一日后', '三日后'],
        one: 0,
        three: 0,
      })
      const dv = new DataSet.View().source(keepData)
      dv.transform({
        type: 'fold',
        fields: ['one', 'three'],
        key: 'city',
        value: 'temperature',
      })
      this.keep_trend_data = dv.rows
    },
    // 七日访问趋势
    sevenDayVisitTrend() {
      var visitPersonData = []
      var visitList = [this.all.lastdailyvisittrend.list[0], this.all.dailyvisittrend.list[0]]
      // 访问趋势
      var visitData = [
        this.all.seventhvisittrend.list[0],
        this.all.sixthvisittrend.list[0],
        this.all.fifthvisittrend.list[0],
        this.all.fourthvisittrend.list[0],
        this.all.thirdvisittrend.list[0],
      ]
      visitData.forEach((e) => {
        visitPersonData.push({
          date: e.ref_date,
          alias: ['访客数'],
          visit: e.visit_uv,
        })
      })
      visitList.forEach((e) => {
        visitPersonData.push({
          date: e.ref_date,
          alias: ['访客数'],
          visit: e.visit_uv,
        })
      })
      const dv = new DataSet.View().source(visitPersonData)
      dv.transform({
        type: 'fold',
        fields: ['visit'],
        key: 'city',
        value: 'temperature',
      })
      this.visitPerson = dv.rows
      this.sevenDayKeepTrend()
    },
    setStyle() {
      const id = 'legend-html'
      if (document.getElementById(id)) {
        return
      }
      const styleTxt = `
          .g2-tooltip {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 3px;
            color: rgb(87, 87, 87);
            font-size: 12px;
            line-height: 20px;
            padding: 10px 10px 6px 10px;
            box-shadow: 0px 0px 10px #aeaeae;
            pointer-events: none;
          }

          .g2-tooltip-list {
            margin: 0;
            padding: 0;
            list-style-type: none;
          }
          .g2-tooltip-value {
            margin-left: 30px;
            display: inline;
            float: right;
          }
          .g2-tooltip-tail {
            background-color: #f9f9f9;
            color: #909090;
            font-size: 14px;
            padding-bottom: 10px;
            margin-top: 10px;
            list-style-type: none;
            text-align: center;
            padding-top: 10px;
          }
          .g2-tooltip-story {
            color: #9b9b9b;
            font-size: 12px;
            padding-bottom: 10px;
            margin-top: 10px;
            list-style-type: none;
            padding-top: 10px;
          }
      `
      const style = document.createElement('style')
      style.setAttribute('id', id)
      style.innerHTML = styleTxt
      document.getElementsByTagName('head')[0].appendChild(style)
    },
    // 加载统计数据
    async loadData() {
      const res = await collect()
      if (res.code == 0) {
        this.all = res.data
        this.initData()
        this.setStyle()
      }
    },
    // 初始化页面的假数据
    mockData() {
      // 日访问人数
      this.visit.push({
        amount: 0,
        percent: 0,
        status: 1,
      })
      // 周访问人数
      this.visit.push({
        amount: 0,
        percent: 0,
        status: 1,
      })
      // 月访问人数
      this.visit.push({
        amount: 0,
        percent: 0,
        status: 1,
      })
      // 日新增访问人数
      this.new_visit.push({
        amount: 0,
        percent: 0,
        status: 1,
      })
      // 周新增访问人数
      this.new_visit.push({
        amount: 0,
        percent: 0,
        status: 1,
      })
      // 月新增访问人数
      this.new_visit.push({
        amount: 0,
        percent: 0,
        status: 1,
      })
      // 分享数据次数
      this.share.push({
        amount: 0,
        percent: 0,
        status: 1,
      })
      // 分享数据人数
      this.share.push({
        amount: 0,
        percent: 0,
        status: 1,
      })
      // 商品浏览次数
      this.browse.push({
        amount: 0,
        percent: 0,
        status: 1,
      })
      // 商品浏览人数
      this.browse.push({
        amount: 0,
        percent: 0,
        status: 1,
      })
      // 近七日访问趋势数据
      let visitPersonData = []
      for (let index = 0; index < 7; index++) {
        visitPersonData.push({
          alias: ['访客数'],
          date: getDay(0 - (index + 1)),
          visit:0
        })
      }
      const dv = new DataSet.View().source(visitPersonData)
      dv.transform({
        type: 'fold',
        fields: ['visit'],
        key: 'city',
        value: 'temperature',
      })
      this.visitPerson = dv.rows
      // 近七日留存趋势
      let keepData = []
      for (let index = 0; index < 7; index++) {
        keepData.push({
          alias: ['一日后','三日后'],
          date: getDay(0 - (index + 1)),
          one:0,
          three:0
        })
      }
      const dv1 = new DataSet.View().source(keepData)
      dv1.transform({
        type: 'fold',
        fields: ['one', 'three'],
        key: 'city',
        value: 'temperature',
      })
      this.keep_trend_data = dv1.rows
      // 销售额类别占比
      let userColumnarData = []
      let area = ['河南省','北京','上海','河北省','辽宁省','浙江省','山东省','湖北省','江苏省','广西']
      for (let index = 0; index < 10; index++) {
        userColumnarData.push({
          alias:['用户数'],
          id:index + 1,
          name:area[index],
          value:0
        })
      }
      const dv2 = new DataSet.View().source(userColumnarData)
      dv2.transform({
        type: 'sort',
        callback(a, b) {
          return a.population - b.population > 0
        },
      })
      this.userColumnarData = dv2.rows
      let otherProvince = [{
        city:'河南省',
        value:20
      },{
        city:'北京',
        value:10
      },{
        city:'上海',
        value:5
      },{
        city:'其他',
        value:0
      }]
      var dv3 = new DataSet.View().source(otherProvince)
      dv3.transform({
        type: 'percent',
        field: 'value',
        dimension: 'city',
        as: 'percent',
      })
      this.userPieData = dv3.rows
      let sexName = [{
        sex:'男',
        value:10
      },{
        sex:'女',
        value:10
      }]
      var dv4 = new DataSet.View().source(sexName)
      dv4.transform({
        type: 'percent',
        field: 'value',
        dimension: 'sex',
        as: 'percent',
      })
      this.userSexData = dv4.rows
    },
  },
}
</script>

<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
</style>
